<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyBillSystem</title>
    <link rel="shortcut icon" th:href="@{img/favicon.ico}">
    <link th:href="@{/css/bootstrap/3.3.6/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/layui/css/layui.css}" rel="stylesheet" media="all">
    <link th:href="@{/css/temp/index.css}" rel="stylesheet">
    <script th:src="@{/js/jquery/2.0.0/jquery.min.js}"></script>
    <script th:src="@{/js/vue/2.5.16/vue.min.js}"></script>
    <script th:src="@{/js/axios/0.17.1/axios.min.js}"></script>
    <script th:src="@{/js/temp/index.js}"></script>
    <script th:src="@{/js/layui/layui.js}"></script>
    <script th:src="@{/js/chart.min/chart.min.js}"></script>
</head>
<body>
<div id="workArea">
    <div id="userInfo" style="display: none" v-if="user">
        <form class="layui-form">
            <div class="headNurse-info-container">
                <img v-if="previewSrc" class="layui-upload-img" :src="previewSrc"
                     style="width: 100px; height: 100px; border: 1px solid #666; border-radius: 50%; margin: 10px 80px;">
                <input type="file" style="display: none" @change="handleFileChange" ref="fileInput"/>
                <button type="button" class="layui-btn" @click="triggerFileInput"
                        style="margin-bottom: 10px;margin-left: 70px">
                    <i class="layui-icon layui-icon-upload"></i> 修改头像
                </button>
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                            用 户 名
                        </div>
                        <input autocomplete="off" class="layui-input" name="username" type="text" v-model="user.name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                            新 密 码
                        </div>
                        <input autocomplete="off" class="layui-input" lay-affix="eye" name="newPassword"
                               type="password" v-model="user.password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                            确认密码
                        </div>
                        <input autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye"
                               name="confirmPassword"
                               type="password">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id='addCategoryInfo' style="display : none" class="layui-form">
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="分类名称" v-model="addOfCategory.name" class="layui-input">
        </div>
        <div style="margin: 10px auto; width: 200px;">
            <select lay-verify="required" v-model="addOfCategory.incomeExpend" lay-filter="addC">
                <option value="">分类类型</option>
                <option :value="0">支出</option>
                <option :value="1">收入</option>
            </select>
        </div>
    </div>
    <div id='addAccountInfo' style="display : none" class="layui-form">
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="账户名称" v-model="addOfAccount.accountName" class="layui-input">
        </div>
        <div style="margin: 10px auto; width: 200px;">
            <select lay-verify="required" v-model="addOfAccount.accountType" lay-filter="addA">
                <option value="">账户类型</option>
                <option value="网络账户">网络账户</option>
                <option value="储蓄卡">储蓄卡</option>
                <option value="现金">现金</option>
                <option value="信用账户">信用账户</option>
            </select>
        </div>
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="账户余额" v-model="addOfAccount.amount" class="layui-input" :change="checkAmount()">
        </div>
    </div>
    <div id='addDreamInfo' style="display : none" class="layui-form">
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="主题" v-model="addDreamInfo.theme" class="layui-input">
        </div>
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="内容" v-model="addDreamInfo.content" class="layui-input">
        </div>
    </div>
    <div id='updateDreamInfo' style="display : none" class="layui-form">
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="主题" v-model="updateDreamInfo.theme" class="layui-input">
        </div>
        <div style="margin: 20px auto; width: 200px">
            <input placeholder="内容" v-model="updateDreamInfo.content" class="layui-input">
        </div>
    </div>
    <div id='updateCategoryInfo' style="display : none">
        <input v-model="updateOfCategory.name" class="layui-input" style="margin: 30px auto; width: 200px" type="text">
    </div>
    <div id='updateAccountInfo' style="display : none">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px">
                    <div class="layui-input-split layui-input-prefix">
                        账户名称
                    </div>
                    <input v-model="updateOfAccount.accountName" class="layui-input">
                </div>
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px"
                     v-if="updateRecordInfo.incomeExpend == 0">
                    <div class="layui-input-split layui-input-prefix">
                        账户类型
                    </div>
                    <select lay-verify="required" v-model="updateOfAccount.accountType" lay-filter="updateAT">
                        <option value="网络账户">网络账户</option>
                        <option value="储蓄卡">储蓄卡</option>
                        <option value="现金">现金</option>
                        <option value="信用账户">信用账户</option>
                    </select>
                </div>

                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px">
                    <div class="layui-input-split layui-input-prefix">
                        账户余额
                    </div>
                    <input v-model="updateOfAccount.amount" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div id='updateRecord' style="display : none">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px">
                    <div class="layui-input-split layui-input-prefix">
                        时间
                    </div>
                    <input type="text" class="form-control" id="timeUpdate" v-model="updateRecordInfo.date">
                </div>
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px">
                    <div class="layui-input-split layui-input-prefix">
                        花费
                    </div>
                    <input v-model="updateRecordInfo.spend" class="layui-input" :change="checkNewSpend()">
                </div>
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px"
                     v-if="updateRecordInfo.incomeExpend == 0">
                    <div class="layui-input-split layui-input-prefix">
                        类型
                    </div>
                    <select lay-verify="required" v-model="updateRecordInfo.cid" lay-filter="updateC">
                        <option v-for="category in expendCategories" :value="category.id">{{category.name}}</option>
                    </select>
                </div>
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px" v-else>
                    <div class="layui-input-split layui-input-prefix">
                        类型
                    </div>
                    <select lay-verify="required" v-model="updateRecordInfo.cid" lay-filter="updateC">
                        <option v-for="category in incomeCategories" :value="category.id">{{category.name}}</option>
                    </select>
                </div>
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px">
                    <div class="layui-input-split layui-input-prefix">
                        账户
                    </div>
                    <select lay-verify="required" v-model="updateRecordInfo.aid" lay-filter="updateA">
                        <option v-for="account in accounts" :value="account.id">{{account.accountName}}</option>
                    </select>
                </div>
                <div class="layui-input-group" style="margin: 30px auto 0; width: 250px">
                    <div class="layui-input-split layui-input-prefix">
                        备注
                    </div>
                    <input v-model="updateRecordInfo.comment" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div id="nav">
        <div class="layui-tab layui-tab-brief" lay-filter="demo" id="tab">
            <ul class="layui-tab-title">
                <li class="layui-this">消费一览</li>
                <li>记一笔</li>
                <li>消费分类</li>
                <li>账户管理</li>
                <li>消费账单</li>
                <li>账单设置</li>
                <li>愿望清单</li>
            </ul>
            <ul class="layui-nav layui-bg-gray layui-layout-right" style="height: 0; margin-right: 20px">
                <li class="layui-nav-item">
                    <a href="javascript:;" v-if="user" style="font-size: 18px">
                        <img v-if="previewSrc" :src="previewSrc" class="layui-nav-img">
                        {{user.name}}
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a @click="updateUserInfo()" href="javascript:;">用户信息</a></dd>
                        <dd><a @click="quit()" href="javascript:;">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="costConfig">
                        <p style="color: silver; font-size: 18px;">本月消费
                        <P>
                        <p style="font-weight: bold; font-size: 32px; color: #58ddff">¥{{costChart.monthCost}}</p>
                    </div>
                    <div class="costConfig">
                        <P style="color: silver; font-size: 18px;">今日消费</P>
                        <p style="font-weight: bold; font-size: 32px; color: #58ddff">¥{{costChart.todayCost}}</p>
                    </div>
                    <div class="costConfig">
                        <p style="color: silver; font-size: 18px;">本月剩余</p>
                        <p style="font-weight: bold; font-size: 32px; color: #58ddff">¥{{costChart.surplusCost}}</p>
                    </div>
                    <div id="costDoughnut">
                        <canvas id="doughnutCost"></canvas>
                    </div>
                    <div class="configCost" style="margin-left: 500px">
                        <p style="color: silver; font-size: 18px;">日均消费
                        <P>
                        <p style="font-weight: bold; font-size: 32px; color: #58ddff">¥{{costChart.dailyAvg}}</p>
                    </div>
                    <div class="configCost">
                        <P style="color: silver; font-size: 18px;">日均可用</P>
                        <p style="font-weight: bold; font-size: 32px; color: #58ddff">¥{{costChart.dailyUse}}</p>
                    </div>
                    <div class="configCost">
                        <p style="color: silver; font-size: 18px;">距离月末</p>
                        <p style="font-weight: bold; font-size: 32px; color: #58ddff">{{costChart.surplusDay}}天</p>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="panel panel-info" id="panel2">
                        <div class="panel-heading">人生得过且过,每一笔都不能记错！</div>
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title" style="width: 200px; margin:0 auto;">
                                <li class="layui-this">支出</li>
                                <li>收入</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="panel-body">
                                        <div class="layui-form" action="" lay-filter="formTest">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">花费</label>
                                                <div class="layui-input-block">
                                                    <input class="layui-input" v-model="expendRecord.spend"
                                                           :change="checkSpend()">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">备注</label>
                                                <div class="layui-input-block">
                                                    <input class="layui-input" v-model="expendRecord.comment">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">分类</label>
                                                <div class="layui-input-block">
                                                    <select lay-verify="required" v-model="expendRecord.cid"
                                                            lay-filter="selectExpendCategory">
                                                        <option v-for="category in expendCategories"
                                                                :value="category.id">{{category.name}}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">账户</label>
                                                <div class="layui-input-block">
                                                    <select lay-verify="required" v-model="expendRecord.aid"
                                                            lay-filter="selectExpendAccount">
                                                        <option v-for="account in accounts" :value="account.id">
                                                            {{account.accountName}}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">时间</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="form-control"
                                                           placeholder="yyyy-MM-dd HH-mm-ss" id="timeSelectA"
                                                           v-model="expendRecord.date">
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="layui-btn" @click="addExpendRecord">支出</button>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="panel-body">
                                        <div class="layui-form" action="" lay-filter="formTest">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">收入</label>
                                                <div class="layui-input-block">
                                                    <input class="layui-input" v-model="incomeRecord.spend"
                                                           :change="checkIncome()">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">备注</label>
                                                <div class="layui-input-block">
                                                    <input class="layui-input" v-model="incomeRecord.comment">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">分类</label>
                                                <div class="layui-input-block">
                                                    <select lay-verify="required" v-model="incomeRecord.cid"
                                                            lay-filter="selectIncomeCategory">
                                                        <option v-for="category in incomeCategories"
                                                                :value="category.id">{{category.name}}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">账户</label>
                                                <div class="layui-input-block">
                                                    <select lay-verify="required" v-model="incomeRecord.aid"
                                                            lay-filter="selectIncomeAccount">
                                                        <option v-for="account in accounts" :value="account.id">
                                                            {{account.accountName}}
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">时间</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="form-control"
                                                           placeholder="yyyy-MM-dd HH-mm-ss" id="timeSelectB"
                                                           v-model="incomeRecord.date">
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="layui-btn" @click="addIncomeRecord">收入</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" @click="addLayer" style="margin-left: 91%; width: 130px;"
                            id="addLayer">添加分类
                    </button>
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">消费分类</li>
                            <li>收入分类</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="table table-striped table-bordered table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="text-center">分类名称</th>
                                        <th class="text-center">消费次数</th>
                                        <th class="text-center">消费金额</th>
                                        <th class="text-center" style="width: 200px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="category in expendCategories" :key="category.id">
                                        <td class="text-center">{{category.name}}</td>
                                        <td class="text-center">{{category.count}}</td>
                                        <td class="text-center">{{category.totalMoney}} （￥）</td>
                                        <td class="text-center">
                                            <div class="btn-group" v-if="category.uid != 0">
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        @click="updateCategory(category.id, category.name)">编辑
                                                </button>
                                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                                        @click="deleteCategory(category.id)">删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="layui-tab-item">
                                <table class="table table-striped table-bordered table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="text-center">分类名称</th>
                                        <th class="text-center">收入次数</th>
                                        <th class="text-center">收入金额</th>
                                        <th class="text-center" style="width: 200px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="category in incomeCategories" :key="category.id">
                                        <td class="text-center">{{category.name}}</td>
                                        <td class="text-center">{{category.count}}</td>
                                        <td class="text-center">{{category.totalMoney}} （￥）</td>
                                        <td class="text-center">
                                            <div class="btn-group" v-if="category.uid != 0">
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        @click="updateCategory(category.id, category.name)">编辑
                                                </button>
                                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                                        @click="deleteCategory(category.id)">删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" @click="addAccount"
                            style="margin-left: 91%;margin-bottom: 20px; width: 130px;">
                        添加账户
                    </button>
                    <table class="table table-striped table-bordered table-hover table-condensed">
                        <thead>
                        <tr>
                            <th class="text-center">账户名称</th>
                            <th class="text-center">账户类型</th>
                            <th class="text-center">账户余额</th>
                            <th class="text-center" style="width: 200px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="account in accounts" :key="account.id">
                            <td class="text-center">{{account.accountName}}</td>
                            <td class="text-center">{{account.accountType}}</td>
                            <td class="text-center">{{account.amount}} （￥）</td>
                            <td class="text-center">
                                <div class="btn-group"> <!-- 使用 Bootstrap 的 btn-group 类 -->
                                    <button type="button" class="layui-btn layui-btn-sm"
                                            @click="updateAccount(account.id, account.accountName, account.accountType, account.amount)">
                                        编辑
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                            @click="deleteAccount(account.id)">删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title" style="width: 250px; margin:0 auto;">
                            <li class="layui-this">支出记录</li>
                            <li>收入记录</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div style="width:600px; margin-left: 80px; margin-top: 10px; display: inline-block; position: absolute">
                                    <canvas id="expendChart"></canvas>
                                </div>
                                <div style="width:600px; margin-top: 350px; margin-left: 80px;display: inline-block; position: absolute">
                                    <canvas id="expendChartPie"></canvas>
                                </div>
                                <div style="display: inline-block">
                                    <ul class="layui-timeline" id="timelineA">
                                        <li class="layui-timeline-item" v-for="bean in expendRecordList">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">{{bean.date}}</h3>
                                                <P style="font-size: 18px; font-weight: bold">-{{bean.spend}}（¥）
                                                    {{bean.accountName}}</P>
                                                <P>{{bean.categoryName}}</P>
                                                <p>
                                                    备注：{{bean.comment}}
                                                </p>
                                            </div>
                                            <div class="layui-btn-group"
                                                 style="top: 20px; left: 500px;display: inline-block; position: absolute">
                                                <button type="button" class="layui-btn layui-btn-normal"
                                                        @click="updateRecord(bean.id,bean.date,bean.spend,bean.cid,bean.comment,bean.aid,bean.incomeExpend)">
                                                    编辑
                                                </button>
                                                <br>
                                                <button type="button" class="layui-btn layui-btn-danger"
                                                        @click="deleteRecord(bean.id)">删除
                                                </button>
                                            </div>
                                        </li>
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <div class="layui-timeline-title">过去</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div style="width:600px; margin-left: 80px; margin-top: 10px; display: inline-block; position: absolute">
                                    <canvas id="incomeChart"></canvas>
                                </div>
                                <div style="width:600px; margin-top: 350px; margin-left: 80px;display: inline-block; position: absolute">
                                    <canvas id="incomeChartPie"></canvas>
                                </div>
                                <div style="display: inline-block">
                                    <ul class="layui-timeline" id="timelineB">
                                        <li class="layui-timeline-item" v-for="bean in incomeRecordList">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">{{bean.date}}</h3>
                                                <P style="font-size: 18px; font-weight: bold">+{{bean.spend}}（¥）
                                                    {{bean.accountName}}</P>
                                                <P>{{bean.categoryName}}</P>
                                                <p>
                                                    备注：{{bean.comment}}
                                                </p>
                                            </div>
                                            <div class="layui-btn-group"
                                                 style="top: 20px; left: 500px;display: inline-block; position: absolute">
                                                <button type="button" class="layui-btn layui-btn-normal"
                                                        @click="updateRecord(bean.id,bean.date,bean.spend,bean.cid,bean.comment,bean.aid,bean.incomeExpend)">
                                                    编辑
                                                </button>
                                                <br>
                                                <button type="button" class="layui-btn layui-btn-danger"
                                                        @click="deleteRecord(bean.id)">删除
                                                </button>
                                            </div>
                                        </li>
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <div class="layui-timeline-title">过去</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="position: fixed; right: 50px; top: 600px;">
                        <img th:src="@{/img/top.png}" @click="toTop">
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="panel panel-info" id="panel5">
                        <div class="panel-heading">本月预算设置（¥）</div>
                        <div class="panel-body">
                            <input type="text" class="form-control" placeholder="本月预算" v-model="config.value"
                                   :change="checkConf()">
                            <button type="button" class="btn btn-primary" @click="setConfig">设置</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" @click="addDream"
                            style="margin-left: 91%;margin-bottom: 20px; width: 130px;">
                        添加愿望
                    </button>
                    <table class="table table-striped table-bordered table-hover table-condensed">
                        <thead>
                        <tr>
                            <th class="text-center">主题</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">内容</th>
                            <th class="text-center" style="width: 200px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="dream in dreams" :key="dream.id">
                            <td class="text-center">{{dream.theme}}</td>
                            <td class="text-center">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius"
                                        style="cursor: default" v-if="dream.state === true">已达成
                                </button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"
                                        style="cursor: default" v-else>待实现
                                </button>
                            </td>
                            <td class="text-center">{{dream.content}}</td>
                            <td class="text-center">
                                <div class="layui-btn-container">
                                    <div class="btn-group">
                                        <button type="button" class="layui-btn layui-btn-sm"
                                                @click="updateState(dream.id)" v-if="dream.state === false">达成
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-disabled"
                                                v-else>达成
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm"
                                                @click="updateDream(dream.id, dream.theme, dream.content)">编辑
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                                @click="deleteDream(dream.id)">删除
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>